<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<html:header title="属性设置">
    <link rel="stylesheet" href="${baseUrl}css/public.css" media="all">
    <style type="text/css">
        *{
            font-size: 12px;
        }

        a{
            text-decoration: none;
            color: #01AAED;
            font-size: 12px;
        }
        a:hover{
            color: #FF5722;
        }

        .layui-form-checkbox span{
            font-size: 12px;
        }

        .attrValue{
            float: left;
            border: 1px #aaaaaa solid;
            border-radius: 2px;
            padding: 6px 4px 0 4px;
            height: 30px;
            margin: 4px 8px 0 0;
        }

        .attrValueInputDiv,.addInputDiv{
            float: left;
            margin: 4px 8px 0 0;
        }
    </style>
    <script>
        jQuery(function () {

            layui.use(['form', 'table','laytpl'], function () {
                var $ = layui.jquery,
                    form = layui.form;
                var laytpl = layui.laytpl;
                get("${baseUrl}goods/attrName/listVo.action", function (res) {
                    if (res.code == 1){
                        var getTpl = table.innerHTML
                            ,view = document.getElementById('view');
                        laytpl(getTpl).render(res.data, function(html){
                            view.innerHTML = html;

                            form.render();
                            initEvent();
                        });
                    }
                });
            });
        });

        function initEvent() {
            $(".attrNameInputDiv,.attrValueInputDiv,.addInputDiv").hide();

            $(".attrNameInput").blur(function () {
                var $this = $(this);
                var attrName = $(this).val();
                if (attrName == "") {
                    tip("属性名不能为空");
                    $(this).focus();
                    return;
                }

                if (attrName == $(this).attr("old")) {
                    tip("属性名更新成功-值未变");
                    $this.parent().hide();
                    $this.parent().prev().show();
                    $this.parent().prev().find("span").html(attrName);
                    return;
                }

                var json = {
                    id:$(this).attr("id")
                    ,name : attrName
                };
                tipLoad("属性名更新中...");
                post("${baseUrl}goods/attr/updateAttrName.action",json, function (res) {
                    closeLoading();
                    if (res.code == 1){
                        tip("属性名更新成功");
                        $this.attr("old",attrName);
                        $this.parent().hide();
                        $this.parent().prev().show();
                        $this.parent().prev().find("span").html(attrName);
                    }else {
                        tip(res.msg);
                    }

                });
            });

            $(".attrValueInput").blur(function () {
                var $this = $(this);
                var attrValue = $(this).val();
                var attrNameId = $(this).attr("attrNameId");
                if (attrValue == "") {
                    tip("属性值不能为空");
                    $(this).focus();
                    return;
                }
                if (attrValue == $(this).attr("old")) {
                    tip("属性值更新成功-值未变");
                    $this.parent().parent().hide();
                    $this.parent().parent().prev().show();
                    $this.parent().parent().prev().find("span").html(attrValue);
                    return;
                }

                var json = {
                    id:$(this).attr("attrId")
                    ,attrValue : attrValue
                    ,attrNameId: attrNameId
                };


                tipLoad("属性更新中...");
                post("${baseUrl}goods/attr/updateAttrValue.action",json, function (res) {
                    closeLoading();
                    if (res.code == 1){
                        tip("属性值更新成功");
                        $this.attr("old",attrValue);
                        $this.parent().parent().hide();
                        $this.parent().parent().prev().show();
                        $this.parent().parent().prev().find("span").html(attrValue);
                    }else {
                        tip(res.msg);
                    }
                });

            });

            $(".addInput").blur(function () {
                $this = $(this);
                var attrValue = $(this).val();
                var attrNameId = $(this).attr("attrNameId");
                if (attrValue == "") {
                    //tip("属性值不能为空");
                    $this.parent().parent().hide();
                    return;
                }
                var json = {
                    id:$(this).attr("attrId")
                    ,attrValue : attrValue
                    ,attrNameId: attrNameId
                };

                tipLoad("属性新增中...");
                post("${baseUrl}goods/attr/addAttr.action",json, function (res) {
                    closeLoading();
                    if (res.code == 1){
                        tip("属性值新增成功");

                        var child = "<div class='attrValue'>" +
                            "<input type='checkbox' lay-skin='primary' attrId='"+res.data.id+"' name='value["+res.data.id+"]' title='"+res.data.attrValue+"'>" +
                            "<a href='#' class='edit'><i class='layui-icon layui-icon-edit'></i></a>" +
                            "</div>" +
                            "" +
                            "<div class='layui-inline attrValueInputDiv'>" +
                            "<div class='layui-input-inline'>" +
                            "<input type='text' class='layui-input attrValueInput' attrId='"+res.data.id+"' attrNameId='"+res.data.attrNameId+"' autocomplete='off'>" +
                            "</div>" +
                            "</div>";

                        $this.parent().parent().before(child);
                        $(".attrValueInputDiv").hide();
                        layui.form.render();
                    } else {
                        tip(res.msg);
                    }
                    $this.parent().parent().hide();
                });
            });

            $(".rename").click(function () {
                $(this).parent().parent().hide();
                $(this).parent().parent().next().show();
                $(this).parent().parent().next().find(".attrNameInput").val($(this).parent().prev().html());
                $(this).parent().parent().next().find(".attrNameInput").focus();
            });

            $(".edit").click(function () {
                $(this).parent().hide();
                $(this).parent().next().show();
                $(this).parent().next().find(".attrValueInput").val($(this).prev().find("span").html());
                $(this).parent().next().find(".attrValueInput").focus();
            });

            $(".addAttr").click(function () {
                $(this).parent().prev().show();
                $(this).parent().prev().find(".addInput").val("");
                $(this).parent().prev().find(".addInput").focus();
            });
            $(".delete").click(function () {
                var list = [];
                $(this).parents("tr").find(".attrValue .layui-form-checked").each(function () {
                    list.push({id:$(this).prev().attr("id"), attrNameId:$(this).prev().attr("attrNameId")});
                });

                if (list.length == 0) {
                    tip("未选择任何目标");
                    return;
                }

                layer.confirm("是否删除选中目标？", function (index) {
                    var json={
                        attrList:list
                    };
                    tipLoad("批量删除中...");
                    post("${baseUrl}goods/attr/deleteAttr.action",json, function (res) {
                        closeLoading();
                        if (res.code == 1){
                            tip("属性值删除成功");
                            $.each(list,function(index,item){
                                $("#"+item.id).parent().next().remove();
                                $("#"+item.id).parent().remove();
                            });
                        }else {
                            tip(res.msg);
                        }
                    });
                }) ;
            });
        }
    </script>
</html:header>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <form class="layui-form" method="post" action="" >
            基本信息
            <hr>
            <div id="view" style="overflow: auto;"></div>

        </form>
    </div>
</div>

<script id="table" type="text/html">
    <table class="layui-table" style="min-width: 560px;white-space: nowrap">
        <thead>
        <tr>
            <th style="width: 30px;">操作</th>
            <th style="width: 150px;">属性名</th>
            <th style="min-width: 300px;">属性值</th>
        </tr>
        </thead>
        <tbody>
        {{#  layui.each(d, function(index, attrNameVo){ }}
            <tr>
                <td><a class='delete' href='#'>删除</a></td>


                <td>
                    <div style='overflow: hidden;'>
                        <span>{{attrNameVo.name}}</span>
                        <div style='float: right;'>
                            <a class="rename">重命名</a>
                        </div>
                    </div>

                    <div class='attrNameInputDiv'>
                        <input type='text' class='layui-input attrNameInput' old='{{attrNameVo.name}}' id='{{attrNameVo.id}}' autocomplete='off' maxlength="20">
                    </div>
                </td>


                <td>
                    {{#  layui.each(attrNameVo.attrList, function(index, attr){ }}
                    <div class='attrValue'>
                        <input type='checkbox' lay-skin='primary' id='{{attr.id}}' name='{{attr.name}}' attrNameId='{{attr.attrNameId}}' title='{{attr.attrValue}}'>
                        <a href='#' class='edit'><i class='layui-icon layui-icon-edit'></i></a>
                    </div>
                    <div class='attrValueInputDiv'>
                        <div class='layui-input-inline'>
                            <input type='text' class='layui-input attrValueInput' old='{{attr.attrValue}}' attrId='{{attr.id}}' attrNameId='{{attr.attrNameId}}' autocomplete='off' maxlength="20">
                        </div>
                    </div>
                    {{#  }); }}

                    <div class='addInputDiv'>
                        <div class='layui-input-inline'>
                            <input type='text' class='layui-input addInput' attrNameId='{{attrNameVo.id}}' autocomplete='off' maxlength="20">
                        </div>
                    </div>

                    <div class='attrValue'>
                        <a class='addAttr' href='javascript:;'>新增属性值</a>
                    </div>
                </td>
            </tr>
        {{#  }); }}
        </tbody>
    </table>
</script>
</body>
<html:loading tip="处理中,请稍后..."/>
</html>